<template>
    <div>
        <h2>新增页面</h2>
        <table class="table">
            <tbody>
                <tr>
                    <td>房间名称</td>
                    <td>
                        <input type="text" v-model="data.name">
                    </td>
                </tr>
                <tr>
                    <td>价格</td>
                    <td>
                        <input type="text" v-model="data.price">
                    </td>
                </tr>
                <tr>
                    <td>是否要押金</td>
                    <td>
                        <input type="radio"  name="isDeposit" v-model="data.isDeposit" :value="true" checked>需要
                        <input type="radio"  name="isDeposit" v-model="data.isDeposit" :value="false">不需要
                        <input type="text"  v-if="data.isDeposit==true"  v-model="data.deposit" name="" id="">
                        <input type="text" v-else readonly v-model="data.deposit" name="" id="">元
                    </td>
                </tr>
                <tr>
                    <td>面积</td>
                    <td>
                        <input type="text" v-model="data.area">
                    </td>
                </tr>
                <tr>
                    <td>人数</td>
                    <td>
                        <input type="text" v-model="data.count">
                    </td>
                </tr>
                <tr>
                    <td>是否留言</td>
                    <td>
                        <input type="checkbox" v-model="data.isNode" :value="true">打勾为需要预留信息
                    </td>
                </tr>
                <tr>
                    <td>留言信息</td>
                    <td>
                        <input type="text" v-if="data.isNode==true"  v-model="data.node" >
                        <input type="text" v-else readonly  v-model="data.node" >
                    </td>
                </tr>
                <tr>
                    <td>加床方式</td>
                    <td>
                        <input type="radio" name="goo" v-model="data.extraBed" value="1"  id="" checked>不可加床
                        <input type="radio" name="goo" v-model="data.extraBed" value="2"  id="">免费加床
                        <input type="radio" name="goo" v-model="data.extraBed" value="3"  id="">收费加床
                        <input type="text" v-if="data.extraBed==3" v-model="data.extraBedPrice" >
                        <input type="text" v-else readonly v-model="data.extraBedPrice" >元
                    </td>
                </tr>
                <tr>
                    <td>房号图片</td>
                    <td>
                        <input type="file" @change="sdfer">
                        <img style="width: 150px;width: 150px;" :src="'https://localhost:7097'+data.img" alt="">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio"  name="state" v-model="data.state" value="1" checked>空闲
                        <input type="radio"  name="state" v-model="data.state" value="2">已预订
                    </td>
                </tr>
                <tr>
                    <td>房型编号</td>
                    <td>
                        <select  v-model="data.houseTypeId">
                            <option value="0">请选择</option>
                            <option v-for="i in d" :value="i.id">{{ i.hname }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    
                    <td colspan="2">
                       <input type="button" value="新增" @click="addg" class="btn btn-outline-success">
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();


onMounted(() => {
  gette();
})

const data:any=ref({
    "id": 0,
  "name": "",
  "price": 0,
  "isDeposit": true,
  "deposit": 0,
  "area": 0,
  "count": 0,
  "isNode": true,
  "node": "",
  "extraBed": 0,
  "extraBedPrice": 0,
  "img": "",
  "state": 0,
  "houseTypeId": 0,
  "isDelete": true
})
const addg=()=>{

if(data.value.name.length>6)
{
    alert("房号名称不能超过6个字符");
    return;
}

if(data.value.name=="")
{
alert("名称不能为空");
return;
}
if(data.value.price==0)
{
alert("价格不能为空");
return;
}
if(data.value.deposit==0)
{
alert("押金不能为空");
return;
}
if(data.value.area==0)
{
alert("面积不能为空");
return;
}
if(data.value.count==0)
{
alert("人数不能为空");
return;
}

if(data.value.node=="")
{
alert("留言信息不能为空");
return;
}
if(data.value.extraBed==0)
{
alert("加床方式不能为空");
return;
}
if(data.value.extraBedPrice==0)
{
alert("所需金额不能为空");
return;
}
if(data.value.img=="")
{
alert("图片不能为空");
return;
}
if(data.value.houseTypeId==0)
{
alert("房型不能为空");
return;
}

axios.post("https://localhost:7097/api/HouseNum/AddHouseNum",data.value).then(res=>{

if(res.data>0)
{
    alert("新增成功");
    router.push('/');
}
else
{
    alert("新增失败");
    return;
}


})

}
const d:any=ref({
      "id": 0,
  "hname": ""
})
const gette=()=>{

axios.get("https://localhost:7097/api/HouseType/GetType").then(res=>{

d.value=res.data;

})


}
const sdfer=(e:any)=>{

var f=e.target.files[0];
var fd=new FormData();
fd.append("file",f);

if(f.size>1024*1024*2){

    alert("图片大小不能超过2MB");
    return;
}
if(f.type!='image/jpeg' && f.type!='image/png')
{
    alert("图片格式支持.jpg、.png格式");
    return;
}




axios.post("https://localhost:7097/api/Upload/Uplock",fd).then(res=>{

data.value.img=res.data;

})


}

</script>

<style scoped>

</style>